<template>
    <div class="layout">
      <div class="layout-header">
        <Row>
            <Col>
                <Menu width="auto" mode="horizontal">
                  <MenuItem name="a">
                      菜单1
                  </MenuItem>              
              </menu>
            </Col>
        </Row>
                 
        </div>
        <Row class="layout-box" type="flex">
            <i-col span="4" class="layout-menu-left">             
              <Menu  @on-select="Jump" active-name="0"  theme="light" width="auto" accordion>             
                  <div class="m-box" v-bind:key="index" v-for="(item,index) in MenuList">
                    <!-- 不带二级菜单 -->
                    <MenuItem v-if="!item.submenu" v-bind:name="index">
                      <Icon type="ios-navigate"></Icon>
                      {{item.title}}
                    </MenuItem>

                    <!-- 有子菜单 -->
                    <Submenu v-else  v-bind:name="index">
                      <template slot="title">
                        <Icon type="ios-navigate"></Icon>
                        {{item.title}}
                      </template>
                      <MenuItem v-for="(m,n) in item.submenu" v-bind:key="n" v-bind:name="index + '-' + n">{{m.title}}</MenuItem>                                
                    </Submenu>

                  </div>                 
              </Menu> 
              
            </i-col>
            <i-col class="layout-container-right" span="20">
                <div class="layout-breadcrumb">
                    <Breadcrumb>
                        <Breadcrumb-item v-for="(item,index) in Breadcrumb" v-bind:key="index" v-bind:to="item.url">{{item.title}}</Breadcrumb-item>
                    </Breadcrumb>
                </div>
                <div class="layout-content">
                    <div class="layout-content-main">
                          <router-view></router-view>
                    </div>
                </div>
                <!-- <div class="layout-copy">
                    2011-2016 &copy; TalkingData
                </div> -->
            </i-col>
        </Row>
    </div>
</template>
<style scoped lang="less">
@import "styles/common.css";
.layout {
  width: 100%;
  height: 100%;
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  .layout-box {
    // height: 100%;
    -webkit-box-flex: 1;
  }
}

.layout-container-right {
  display: -webkit-box;
  -webkit-box-orient: vertical;

  .layout-header {
    height: 60px;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    .ivu-menu-light {
      overflow: hidden;
      .ivu-menu-item {
        float: left;
      }
    }
  }
  .layout-breadcrumb {
    padding: 10px 15px 0;
  }
  .layout-content {
    -webkit-box-flex: 1;
    min-height: 200px;
    margin: 15px;
    // overflow: auto;
    background: #fff;
    border-radius: 4px;
    display: -webkit-box;
  }
  .layout-content-main {
    position: relative;
    -webkit-box-flex: 1;
    padding: 10px;
    overflow: auto;
    // -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
  }
  .layout-copy {
    text-align: center;
    padding: 10px 0 20px;
    color: #9ea7b4;
  }
}

.layout-menu-left {
  //   background: #464c5b;
  ul {
    height: 100%;
    overflow: auto;
  }
  .layout-logo-left {
    width: 90%;
    height: 30px;
    // background: #5b6270;
    // background: url(./images/logo.png) 10px 0 no-repeat;
    // background-size: contain;
    border-radius: 3px;
    margin: 15px auto;
    text-align: center;
    line-height: 30px;
  }
}
</style>
<script>
export default {
  data() {
    return {
      MenuList: [
        {
          title: "欢迎页",
          url: "/welcome"
        },
        {
          title: "员工管理",
          submenu: [
            {
              title: "员工列表",
              url: "/user/list"
            },
            {
              title: "添加员工",
              url: "/user/add"
            }
          ]
        },
        {
          title: "节目管理",
          submenu: [
            {
              title: "节目列表",
              url: "/act/list"
            },
            {
              title: "添加节目",
              url: "/act/add"
            }
          ]
        },
        {
          title: "奖品管理",
          submenu: [
            {
              title: "奖品列表",
              url: "/prize/list"
            },
            {
              title: "添加奖品",
              url: "/prize/add"
            }
          ]
        },
        {
          title: "签到管理",
          submenu: [
            {
              title: "签到列表",
              url: "/sign/list"
            },
            {
              title: "测试签到",
              url: "/sign/add"
            }
          ]
        },
        {
          title: "中奖管理",
          submenu: [
            {
              title: "测试抽奖列表",
              url: "/win/create"
            },
            {
              title: "中奖列表",
              url: "/win/list"
            },
            {
              title: "中奖查询",
              url: "/win/search"
            }
          ]
        },
        {
          title: "投票管理",
          submenu: [
            {
              title: "测试投票",
              url: "/vote/add"
            },
            {
              title: "投票结果",
              url: "/vote/list"
            }
          ]
        },
        {
          title: "聊天管理",
          submenu: [
            {
              title: "聊天测试",
              url: "/chat/add"
            },
            {
              title: "聊天记录",
              url: "/chat/list"
            }
          ]
        }
      ],
      Breadcrumb: [
        {
          title: "首页",
          url: "/"
        },
        {
          title: "欢迎页",
          url: "/welcome"
        }
      ],
      activeUrl: "/welcome"
    };
  },
  mounted() {
    var menuList = this.MenuList;
    // this.$router.push(menuList[0].url);
  },
  methods: {
    Jump(index) {
      var self = this;
      var menuList = self.MenuList;
      var url;

      if (typeof index == "string") {
        var one = index.split("-");
        url = menuList[one[0]].submenu[one[1]].url;
        var arr = [
          {
            title: "首页",
            url: "/"
          }
        ];
        arr.push({
          title: menuList[one[0]].title,
          url: menuList[one[0]].submenu[0].url
        });

        arr.push({
          title: menuList[one[0]].submenu[one[1]].title,
          url: url
        });
        self.Breadcrumb = arr;
      } else {
        url = menuList[index].url;
        var arr = [
          {
            title: "首页",
            url: "/"
          }
        ];
        arr.push({
          title: menuList[index].title,
          url: url
        });
        self.Breadcrumb = arr;
      }
      this.$router.push(url);
    }
  }
};
</script>
